<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="!loading"
    width="500px"
    class="class-selection-dialog">
    
    <div class="dialog-content">
      <div class="class-selection" v-loading="loading">
        <div class="class-list" v-if="classList.length > 0">
          <div 
            v-for="classItem in classList" 
            :key="classItem.classId"
            class="class-item"
            :class="{ 'is-selected': isClassSelected(classItem.classId) }"
            @click="selectClass(classItem)">
            <div class="class-info">
              <div class="class-name">
                <i class="el-icon-s-home"></i>
                {{ classItem.className }}
              </div>
              <div class="class-desc">
                <span class="student-count">
                  <i class="el-icon-user"></i>
                  {{ classItem.studentCount || 0 }}人
                </span>
                <span class="create-time">
                  <i class="el-icon-time"></i>
                  {{ formatDate(classItem.createTime) }}
                </span>
              </div>
            </div>
            <div class="selected-icon" v-if="isClassSelected(classItem.classId)">
              <i class="el-icon-check"></i>
            </div>
          </div>
        </div>
        
        <div class="empty-state" v-else>
          <el-empty :description="emptyText">
            <el-button 
              type="primary" 
              size="small" 
              @click="handleCreateClass"
              v-if="showCreateButton">
              创建班级
            </el-button>
          </el-empty>
        </div>
      </div>
      
      <div class="pagination-wrapper" v-if="total > pageSize">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page.sync="currentPage"
          @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
    
    <div slot="footer" class="dialog-footer">
      <el-button 
        @click="handleCancel" 
        :disabled="loading"
        v-if="showCancelButton">
        取消
      </el-button>
      <el-button 
        type="primary" 
        @click="handleConfirm"
        :loading="loading"
        :disabled="!selectedClassId">
        {{ confirmButtonText }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ClassSelectionDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '选择班级'
    },
    classList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    selectedClassId: {
      type: [String, Number],
      default: ''
    },
    emptyText: {
      type: String,
      default: '暂无班级数据'
    },
    showCreateButton: {
      type: Boolean,
      default: true
    },
    showCancelButton: {
      type: Boolean,
      default: true
    },
    confirmButtonText: {
      type: String,
      default: '确定'
    },
    pageSize: {
      type: Number,
      default: 5
    },
    total: {
      type: Number,
      default: 0
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      localSelectedClassId: this.selectedClassId
    };
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal;
      if (newVal) {
        this.localSelectedClassId = this.selectedClassId;
      }
    },
    dialogVisible(newVal) {
      this.$emit('update:visible', newVal);
      if (!newVal) {
        this.$emit('close');
      }
    },
    selectedClassId(newVal) {
      this.localSelectedClassId = newVal;
    }
  },
  methods: {
    isClassSelected(classId) {
      return this.localSelectedClassId == classId;
    },
    
    selectClass(classItem) {
      this.localSelectedClassId = classItem.classId;
    },
    
    handlePageChange(page) {
      this.$emit('page-change', page);
    },
    
    handleCreateClass() {
      this.$emit('create');
    },
    
    handleCancel() {
      this.dialogVisible = false;
      this.$emit('cancel');
    },
    
    handleConfirm() {
      if (!this.localSelectedClassId) {
        this.$message.warning('请选择一个班级');
        return;
      }
      this.$emit('confirm', this.localSelectedClassId);
    },
    
    formatDate(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    }
  }
};
</script>

<style scoped>
.class-selection-dialog {
  border-radius: 8px;
  overflow: hidden;
}

.dialog-content {
  padding: 0 10px;
  max-height: 60vh;
  overflow-y: auto;
}

.class-list {
  margin: 0 -10px;
}

.class-item {
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.class-item:hover {
  border-color: #409EFF;
  background-color: #f5f7fa;
}

.class-item.is-selected {
  border-color: #409EFF;
  background-color: #ecf5ff;
}

.class-info {
  flex: 1;
  overflow: hidden;
}

.class-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.class-name i {
  margin-right: 8px;
  color: #409EFF;
}

.class-desc {
  font-size: 12px;
  color: #909399;
  display: flex;
  align-items: center;
}

.class-desc > span {
  display: inline-flex;
  align-items: center;
  margin-right: 15px;
}

.class-desc i {
  margin-right: 3px;
  font-size: 12px;
}

.selected-icon {
  color: #67C23A;
  font-size: 18px;
  margin-left: 10px;
}

.empty-state {
  padding: 30px 0;
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: center;
}

.dialog-footer {
  text-align: right;
  padding: 15px 20px 20px;
  border-top: 1px solid #ebeef5;
}
</style>
